<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_title">
				<view class="iconfont h_t_icon" @click="backFun">&#xe8c8;</view>
				<view class="h_t_txt">充值</view>
				<view class="h_t_txt2" @click="goPage('/pages/personal/transfer/gwb_list')">明细</view>
			</view>
			<!-- <view class="h_nav">
				<view class="h_n_tit">
					<view class="h_n_t" :class="n_index === 0 ? 'h_n_select':''" @click="navChange(0)">充值</view>
					<view class="h_n_t" :class="n_index === 1 ? 'h_n_select':''" @click="navChange(1)">兑换</view>
					<view class="h_n_t" :class="n_index === 2 ? 'h_n_select':''" @click="navChange(2)">转账</view>
				</view>
			</view> -->
		</view>
		<view class="mainItem">
			<view class="main_con" v-if="n_index === 0">
				<view class="m_txt2" style="text-align: center;">当前余额</view>
				<view class="m_txt3">{{y}}</view>
				<view class="m_txt1">充值金额</view>
				<view class="m_inputBox">
					<label class="m_i_code">￥</label>
					<input class="m_input" type="number" v-model="amount" placeholder="请输入充值金额" placeholder-class="m_i_null">
				</view>
				<view class="m_txt2">到账余额：{{amount}}</view>
				<view class="m_txt1" style="margin-top: 30rpx;">支付方式</view>
				<view class="m_payBox" @click="payTypeChange(0)">
					<view class="m_icon1 iconfont">&#xe68a;</view>
					<view class="m_i_txt">支付宝</view>
					<view class="m_icon2 iconfont" :class="pay_type === 0 ? 'm_i_select':''">&#xe626;</view>
				</view>
				 <!-- #ifndef H5 -->
				<view class="m_payBox" @click="payTypeChange(1)">
					<view class="m_icon1 iconfont" style="color: #07C160;">&#xe607;</view>
					<view class="m_i_txt">微信</view>
					<view class="m_icon2 iconfont" :class="pay_type === 1 ? 'm_i_select':''">&#xe626;</view>
				</view>
				    <!-- #endif -->
				<view class="m_btn" @click="pay">确认充值</view>
			</view>
			<view class="main_con" v-if="n_index === 1">
				<view class="m_c_box">
					<view class="m_c_b">
						<view class="m_c_txt2">{{y}}</view>
						<view class="m_c_txt1">当前可兑换余额</view>
					</view>
					<view class="m_c_b">
						<view class="m_c_txt2">{{b}}</view>
						<view class="m_c_txt1">当前购物币</view>
					</view>
				</view>
				<view class="m_txt1" style="margin-top: 40rpx;">兑换金额</view>
				<view class="m_inputBox">
					<label class="m_i_code">￥</label>
					<input class="m_input" type="number" v-model="amount2" placeholder="请输入兑换金额" placeholder-class="m_i_null">
				</view>
				<view class="m_txt2">到账购物币：{{amount2}}</view>
				<view class="m_btn" style="background: #F1AD00;" @click="dh">确认兑换</view>
			</view>
			<view class="main_con" v-if="n_index === 2">
				<view class="m_txt2" style="text-align: center;">持有购物币</view>
				<view class="m_txt3">{{b}}</view>
				<view class="m_txt1" style="margin-top: 40rpx;">对方账号</view>
				<view class="m_inputBox">
					<input class="m_input" type="number" v-model="account" placeholder="请输入对方账号" placeholder-class="m_i_null" maxlength="11">
				</view>
				<view class="m_txt1" style="margin-top: 40rpx;">转账购物币</view>
				<view class="m_inputBox">
					<input class="m_input" type="number" v-model="amount3" placeholder="请输入转账购物币" placeholder-class="m_i_null" maxlength="11">
				</view>
				<view class="m_txt2">对方可收购物币：{{amount3}}</view>
				<view class="m_btn" style="background: #FF4F00" @click="zz">确认转账</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				b:0,
				y:0,
				n_index:0,
				amount:'',
				pay_type:0,
			
				amount2:'',
				account:'',
				amount3:'',
			};
		},
		onShow() {
			this.lodata();
		},
		methods:{
			lodata: function() {
				let me = this;
				me.Net._get('myData',{},(res)=>{
					if(res.code ==1){
						//console.log(res.data)
							me.y=res.data.y
						me.b=res.data.b
							//me.hot=res.data.hot
					}
				});
				},
			zz: function() {
				let me = this;
				me.Net._get('zz',{money:me.amount3,name:me.account},(res)=>{
					if(res.code ==1){
						me.Msg.Success(res.msg,(res)=>{
						this.lodata();
						 })
					}
				});
				},
			dh: function() {
				let me = this;
				me.Net._get('dh',{money:me.amount2},(res)=>{
					if(res.code ==1){
						me.Msg.Success(res.msg,(res)=>{
						uni.switchTab({
							url:'/pages/personal/personal'
						})
						 })
					}
				});
				},
			pay: function() {
				var that = this;
				if(that.pay_type==1)
				{
					// #ifdef APP-PLUS
					//app
					 that.Net._get('cz',{money:that.amount,type:2},(res)=>{	
						if(res.code ==1){
						let orderData = JSON.parse(res.data);
						//console.log(orderData)
						let pathData = '/pages/payIndex/payIndex?rc_result=' + res.data;
						
						// console.log(orderData.original_id)
						 console.log(pathData)
						
						plus.share.getServices(function(res) {
							var sweixin = null;
							for (var i = 0; i < res.length; i++) {
								var t = res[i];
								if (t.id == 'weixin') {
									sweixin = t;
								}
							}
							if (sweixin) {
								sweixin.launchMiniProgram({
									id: orderData.original_id, //这里写你的小程序原始id（以gh开头）
									type: 0, //这里是不同的环境（默认0）
									path: pathData //这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
								});
						
							}
						}, function(res) {
							//console.log(JSON.stringify(res));
						});
							}
					  });
					  // #endif
					  // #ifdef H5
					  that.Net._get('cz_h5',{money:that.amount,type:2},(res)=>{
					  	if(res.code ==1){
							let resTwo = JSON.parse(res.data)
					  		uni.navigateTo({
								
					  			url: '/pages/personal/url?url=' + resTwo.openlink
					  		})
					  					
					  	}
					  });
					  // #endif
					
				}
				
				else if(that.pay_type==0)
				{
					// #ifdef APP-PLUS
						 that.Net._get('cz',{money:that.amount,type:1},(res)=>{	
							if(res.code ==1){
								uni.navigateTo({
									url: '/pages/personal/url?url=' + res.data
								})
								// uni.requestPayment({
								// 					provider: 'alipay',
								// 					orderInfo:res.data, //微信、支付宝订单数据
								// 					success: function (res) {
								// 					that.Msg.Success('付款成功',(res)=>{
								// 					uni.switchTab({
								// 						url:'/pages/personal/personal'
								// 					})
								// 					 })
								// 						console.log('success:' + JSON.stringify(res));
								// 					},
								// 					fail: function (err) {
								// 						console.log('fail:' + JSON.stringify(err));
								// 					}
								// 				});
							}
						});	
						// #endif
						
						// #ifdef H5
						that.Net._get('cz_h5',{money:that.amount,type:1},(res)=>{
							if(res.code ==1){
								uni.navigateTo({
									url: '/pages/personal/url?url=' + res.data
								})
					
							}
						});	
						// #endif
				
				}
			               
							},
			navChange(_index){
				if(this.n_index === _index){
					return
				}
				this.n_index = _index;
			},
			payTypeChange(_type){
				if(this.pay_type === _type){
					return
				}
				this.pay_type = _type;
			},
			goPage(_route){
				uni.navigateTo({
					url:_route
				})
			},
			backFun(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.pageItem{
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.head{
	width: 100%;
	padding: var(--status-bar-height) 30rpx 0;
	background: #4d726f;
	.h_title{
		width: 100%;
		height: 7vh;
		display: flex;
		align-items: center;
		.h_t_icon{
			width: 100rpx;
			color: #ffffff;
			font-size: 35rpx;
		}
		.h_t_txt{
			flex: 1;
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
			font-weight: bold;
		}
		.h_t_txt2{
			width: 100rpx;
			font-size: 30rpx;
			color: #fff;
			text-align: right;
		}
	}
	.h_nav{
		width: 100%;
		margin-top: 40rpx;
		.h_n_tit{
			width: 100%;
			height: 4.5vh;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.h_n_t{
				flex: 1;
				height: 100%;
				font-size: 30rpx;
				color:#fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.h_n_select{
				background: #fff;
				color: #4d726f;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 15rpx;
			}
		}
	}
}
.mainItem{
	width: calc(100% - 60rpx);
	height: calc(100% - var(--status-bar-height) - 11.5vh - 100rpx);
	background: #fff;
	margin-top: 35rpx;
	margin-left: 30rpx;
	border-radius: 15rpx;
	.main_con{
		width: 100%;
		padding: 30rpx;
		.m_txt1{
			width: 100%;
			font-size: 30rpx;
			color: #333;
			padding: 20rpx 0;
			font-weight: bold;
		}
		.m_inputBox{
			width: 100%;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			border: 1rpx solid #eaeaea;
			border-radius: 10rpx;
			margin-top: 10rpx;
			.m_i_code{
				font-size: 40rpx;
				font-weight: bold;
				color: #333;
			}
			.m_input{
				height: 70rpx;
				font-size: 45rpx;
				font-weight: bold;
				padding: 0 0 0 20rpx;
			}
			.m_i_null{
				font-size: 35rpx;
				font-weight: 500;
				color: #c1c1c1;
			}
		}
		.m_txt2{
			width: 100%;
			padding: 10rpx 0;
			color: #676767;
		}
		.m_txt3{
			width: 100%;
			font-size: 50rpx;
			font-weight: bold;
			text-align: center;
		}
		.m_payBox{
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.m_icon1{
				font-size: 60rpx;
				color: #13adff;
			}
			.m_i_txt{
				flex: 1;
				padding: 20rpx;
				font-size: 32rpx;
			}
			.m_icon2{
				font-size: 50rpx;
				color: #747474;
				border-radius: 50%;
			}
			.m_i_select{
				color: #4d726f;
			}
		}
		.m_c_box{
			width: 100%;
			display: flex;
			.m_c_b{
				flex: 1;
				text-align: center;
				position: relative;
				.m_c_txt1{
					width: 100%;
					font-size: 30rpx;
					color: #676767;
					padding-top: 15rpx;
				}
				.m_c_txt2{
					width: 100%;
					font-size: 40rpx;
					font-weight: bold;
					text-align: center;
					color: #333;
					padding-top: 15rpx;
				}
			}
			.m_c_b:not(:first-child)::after{
				content: '';
				position: absolute;
				width: 1rpx;
				height: 60%;
				top: 20%;
				left: 0;
				background: #949494;
			}
		}
		.m_btn{
			width: 80%;
			margin-left: 10%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			background: #4d726f;
			border-radius: 20rpx;
			margin-top: 100rpx;
		}
	}
}
</style>
